<template>
	<view>
		<view class="opinion">
			<view class="title fbox fbox-acenter">
				<image src="/static/information/line.png" mode="widthFix"></image>
				<text class="f36">I Opinion Poll</text>
			</view>
			<view class="opinion-cont f26 fbox fbox-jbetween fbox-start">
				<view class="zuo fbox fbox-column fbox-acenter fbox-jcenter">
					<u-icon name="thumb-up-fill" color="#0055ff" size="28" @click="gosupport(1)"
						v-if="opinioninfo.type == '1'"></u-icon>
					<u-icon name="thumb-up" color="#999" size="28" @click="gosupport(1)" v-else>
					</u-icon>
					<text class="color3">{{opinioninfo.ai_support_num}}</text>
				</view>
				<view class="zhong colorwhite fbox fbox-acenter">
					<text class="hong tc" :style="{width:thumbdown + '%'}" >{{thumbdown}}% </text>
					<text class="hui tc" :style="{width:thumbup + '%'}">{{thumbup}}%</text>
				</view>
				<view class="you fbox fbox-column fbox-acenter fbox-jcenter">
					<u-icon name="thumb-down-fill" color="#ff557f" size="28" @click="gosupport(0)"
						v-if="opinioninfo.type == '0'"></u-icon>
					<u-icon name="thumb-down" color="#999" size="28" @click="gosupport(0)" v-else>
					</u-icon>
					
					<text class="color3">{{opinioninfo.ai_support_no_num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "opinion",
		data() {
			return {};
		},
		props: {
			opinioninfo: {
				type: Object,
				default: {}
			},
			thumbup: {
				type: String,
				default: '50'
			},
			thumbdown: {
				type: String,
				default: '50'
			},
			id: {
				type: String,
				default: ""
			},
			type:{
				type:String,
				defalut:""
			}
		},
		methods: {
			gosupport(num) {
				console.log(num)
				uni.showLoading({
					mask: true
				})
				
				const params = {
					map: 'applet_information_support',
					aid: this.id,
					type:num
				}
				if(this.type == "business"){
					params.map = 'applet_shop_support'
				}
				console.log(params)
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: "none"
						})
						this.$emit("init")
					} else {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.opinion {
		padding: 0rpx 30rpx 0rpx;

		.title {
			padding: 30rpx 0;

			image {
				width: 8rpx;
				margin-right: 20rpx;
			}

			text {
				font-weight: bold;
			}
		}

		.opinion-cont {
			.zuo {
				width: 10%;

				image {
					width: 50rpx;
				}

				text {
					margin-top: 10rpx;
				}
			}

			.zhong {
				width: 90%;

				.hong {
					background-color: #0055ff;
					width: 40%;
					display: block;
					padding: 10rpx 0;
					border-radius: 100rpx;
				}

				.hui {
					background-color: #ff557f;
					width: 60%;
					display: block;
					padding: 10rpx 0;
					border-radius: 100rpx;
				}
			}

			.you {
				width: 10%;

				image {
					width: 50rpx;
				}

				text {
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
